<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    {{pmsg}}
<!--    <my-com></my-com>-->


<!--    通过属性绑定的形式，让父组件给子组件传值-->
    <login v-bind:myval="pmsg">

    </login>
</div>
<template id="tem">
    <div>
        <h3>我是组件的内容</h3>
    </div>
</template>


<template id="login">
    <div>
        用户名：<input type="text"><br>
        密码： <input type="password">
        {{msg}}
        {{myval}}
    </div>
</template>
<script>
<!--    全局组件-->
    Vue.component('myCom',Vue.extend({
        template: '#tem'
    }))
 new Vue({
     el: '#app',
     data: {
         pmsg: '我是父组件的data'
     },
     components: {
        login: {
            template: "#login",
            //组件有自己的data
            //组件自己的data是一个方法，且是一个带有返回值的方法
            data: function (){
                return{
                    msg: '组件自己的data',
                    msg2: "00000"
                }
            },

            //myval需要在子组件的props数组中声明一下，才可以在子组件中使用
            props: ['myval']
        //    data和props对比
        //    data是子组件自己定义的值，可以修改
        //    props是父组件传递给子组件的值，如果要修改我们直接去修改父组件，而不通过子组件修改
        }
     }
 })
</script>
</body>
</html>
